<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>河南省GDP数据大屏</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="decoration">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    
    <div class="container">
        <!-- 顶部标题区 -->
        <div class="header">
            <h1>河南省GDP数据大屏</h1>
            <p>实时监测河南省经济发展状况，展示GDP总量、增长率及产业结构变化趋势</p>
        </div>
        
        <div class="main-content">
            <!-- 左侧图表区 -->
            <div class="chart-section">
                <!-- GDP总量趋势图 -->
                <div class="chart-container">
                    <div class="chart-title"><i></i>河南省GDP总量趋势 (亿元)</div>
                    <div id="gdpTrendChart" class="chart"></div>
                </div>
                
                <!-- 增长率对比图 -->
                <div class="chart-container">
                    <div class="chart-title"><i></i>GDP增长率对比 (%)</div>
                    <div id="growthRateChart" class="chart"></div>
                </div>
                
                <!-- 产业结构图 -->
                <div class="chart-container full-width">
                    <div class="chart-title"><i></i>河南省产业结构分析</div>
                    <div id="industryChart" class="chart"></div>
                </div>
            </div>
            
            <!-- 右侧信息区 -->
            <div class="info-section">
                <div class="info-title"><i></i>关键指标概览</div>
                <div class="info-content">
                    <div class="info-card">
                        <div class="icon">💰</div>
                        <div class="content">
                            <h3>GDP总量 (2024年)</h3>
                            <p id="gdpTotal">63,589.99亿元</p>
                        </div>
                    </div>
                    
                    <div class="info-card">
                        <div class="icon">📈</div>
                        <div class="content">
                            <h3>GDP增长率</h3>
                            <p id="growthRate">5.1%</p>
                        </div>
                    </div>
                    
                    <div class="info-card">
                        <div class="icon">🏭</div>
                        <div class="content">
                            <h3>第二产业占比</h3>
                            <p id="secondaryPerc">38.3%</p>
                        </div>
                    </div>
                    
                    <div class="info-card">
                        <div class="icon">🛒</div>
                        <div class="content">
                            <h3>第三产业占比</h3>
                            <p id="tertiaryPerc">53.1%</p>
                        </div>
                    </div>
                    
                    <div class="info-card">
                        <div class="icon">👥</div>
                        <div class="content">
                            <h3>人均GDP</h3>
                            <p id="gdpPerCapita">64,210元</p>
                        </div>
                    </div>
                    
                    <div class="info-card">
                        <div class="icon">🌾</div>
                        <div class="content">
                            <h3>第一产业占比</h3>
                            <p id="primaryPerc">8.6%</p>
                        </div>
                    </div>
                </div>
                
                <!-- 数据滚动区 -->
                <div class="data-scroll">
                    <div class="scroll-content" id="scrollContent">
                        <!-- 滚动内容将通过JS动态生成 -->
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部信息区 -->
        <div class="footer">
            <p>数据来源：河南省统计局 | 更新日期：2024年12月 | 技术支持：河南省经济数据分析中心</p>
            <p>© 2024 河南省经济发展监测平台 - 本数据仅供参考，请以官方发布为准</p>
        </div>
    </div>

    <script>
        // 初始化所有图表
        document.addEventListener('DOMContentLoaded', function() {
            // 从后端获取数据
            fetchData();
            
            // 初始化滚动内容
            initScrollContent();
        });
        
        // 从后端获取数据
        function fetchData() {
            // 获取年度GDP数据
            fetch('/api/annual_gdp')
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        updateCharts(data.data);
                        updateKeyIndicators(data.data);
                    }
                });
                
            // 获取区域GDP数据
            fetch('/api/regional_gdp')
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        updateScrollContent(data.data);
                    }
                });
        }
        
        // 更新图表
        function updateCharts(gdpData) {
            // GDP趋势图
            const trendChart = echarts.init(document.getElementById('gdpTrendChart'));
            const trendOption = {
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}年: {c}亿元'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: gdpData.year,
                    axisLine: {
                        lineStyle: {
                            color: '#5a8fd4'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '亿元',
                    axisLine: {
                        lineStyle: {
                            color: '#5a8fd4'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(90, 143, 212, 0.2)'
                        }
                    }
                },
                series: [{
                    name: 'GDP总量',
                    type: 'line',
                    smooth: true,
                    data: gdpData.gdp_total,
                    lineStyle: {
                        width: 4,
                        color: '#03a9f4'
                    },
                    itemStyle: {
                        color: '#03a9f4'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(3, 169, 244, 0.5)' },
                            { offset: 1, color: 'rgba(3, 169, 244, 0.1)' }
                        ])
                    },
                    symbolSize: 8
                }]
            };
            trendChart.setOption(trendOption);
            
            // 增长率对比图
            const growthChart = echarts.init(document.getElementById('growthRateChart'));
            const growthOption = {
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}: {c}%'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: gdpData.year,
                    axisLine: {
                        lineStyle: {
                            color: '#5a8fd4'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '百分比(%)',
                    axisLine: {
                        lineStyle: {
                            color: '#5a8fd4'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(90, 143, 212, 0.2)'
                        }
                    }
                },
                series: [{
                    name: '增长率',
                    type: 'bar',
                    data: gdpData.growth_rate,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#4fc3f7' },
                            { offset: 1, color: '#29b6f6' }
                        ])
                    },
                    barWidth: '40%'
                }]
            };
            growthChart.setOption(growthOption);
            
            // 产业结构图
            const industryChart = echarts.init(document.getElementById('industryChart'));
            const industryOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['第一产业', '第二产业', '第三产业'],
                    textStyle: {
                        color: '#a1d1f7'
                    },
                    right: 10,
                    top: 10
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: gdpData.year,
                    axisLine: {
                        lineStyle: {
                            color: '#5a8fd4'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '百分比(%)',
                    axisLine: {
                        lineStyle: {
                            color: '#5a8fd4'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(90, 143, 212, 0.2)'
                        }
                    }
                },
                series: [
                    {
                        name: '第一产业',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: gdpData.primary_perc,
                        itemStyle: {
                            color: '#64DD17'
                        }
                    },
                    {
                        name: '第二产业',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: gdpData.secondary_perc,
                        itemStyle: {
                            color: '#29B6F6'
                        }
                    },
                    {
                        name: '第三产业',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: gdpData.tertiary_perc,
                        itemStyle: {
                            color: '#FFA726'
                        }
                    }
                ]
            };
            industryChart.setOption(industryOption);
            
            // 响应式调整
            window.addEventListener('resize', function() {
                trendChart.resize();
                growthChart.resize();
                industryChart.resize();
            });
        }
        
        // 更新关键指标
        function updateKeyIndicators(data) {
            const lastYear = data.year[data.year.length - 1];
            const lastIndex = data.year.length - 1;
            
            document.getElementById('gdpTotal').textContent = 
                data.gdp_total[lastIndex].toLocaleString('zh-CN') + '亿元';
                
            document.getElementById('growthRate').textContent = 
                data.growth_rate[lastIndex] + '%';
                
            document.getElementById('primaryPerc').textContent = 
                data.primary_perc[lastIndex] + '%';
                
            document.getElementById('secondaryPerc').textContent = 
                data.secondary_perc[lastIndex] + '%';
                
            document.getElementById('tertiaryPerc').textContent = 
                data.tertiary_perc[lastIndex] + '%';
                
            document.getElementById('gdpPerCapita').textContent = 
                data.gdp_per_capita[lastIndex].toLocaleString('zh-CN') + '元';
        }
        
        // 初始化滚动内容
        function initScrollContent() {
            const scrollContent = document.getElementById('scrollContent');
            
            // 初始占位内容
            scrollContent.innerHTML = `
                <div class="scroll-item">正在加载最新数据...</div>
            `;
        }
        
        // 更新滚动内容
        function updateScrollContent(regionalData) {
            const scrollContent = document.getElementById('scrollContent');
            let contentHTML = '';
            
            // 按GDP值排序
            const sortedData = [...regionalData].sort((a, b) => b.gdp_value - a.gdp_value);
            
            // 生成滚动内容
            sortedData.forEach(city => {
                contentHTML += `
                    <div class="scroll-item">
                        ${city.city}GDP总量：${city.gdp_value.toLocaleString('zh-CN')}亿元，增长${city.growth_rate}%
                    </div>
                `;
            });
            
            scrollContent.innerHTML = contentHTML;
            
            // 设置滚动动画
            startScrollAnimation();
        }
        
        // 开始滚动动画
        function startScrollAnimation() {
            const scrollContent = document.getElementById('scrollContent');
            const items = scrollContent.querySelectorAll('.scroll-item');
            const itemHeight = items[0].offsetHeight;
            const totalHeight = items.length * itemHeight;
            
            // 重置位置
            scrollContent.style.transform = 'translateY(0)';
            
            // 设置动画
            scrollContent.style.animation = 'none';
            setTimeout(() => {
                scrollContent.style.animation = `scroll ${items.length * 2}s linear infinite`;
            }, 10);
        }
    </script>
</body>
</html>